<template>
  <div id="empapp">
    <!-- 面包屑导航部分 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/sys' }">系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="always">
      <el-row>
        <el-col :span="12"><el-input style="width: 100%;" v-model="key" placeholder="请输入内容"></el-input></el-col>
        <el-col :span="12">
          <el-button type="success" icon="el-icon-search">查询</el-button>
          <el-button type="warning" icon="el-icon-user">新建</el-button>
        </el-col>
      </el-row>
      <!-- 核心数据区域 -->
      <el-table :data="les" border style="width: 100%">
        <el-table-column fixed label="#" type="index"></el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-descriptions title="用户信息" border direction="vertical" :column="3" size="">
              <template slot="extra">
                <el-button type="primary" size="small">操作</el-button>
              </template>
              <el-descriptions-item :contentStyle="{ 'text-align': 'right', 'background-color': 'red' }">
                <template slot="label">
                  <i class="el-icon-user"></i>
                  用户名
                </template>
                {{ props.row.ename }}
              </el-descriptions-item>
              <el-descriptions-item label="用户名">{{ props.row.ename }}</el-descriptions-item>
              <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
              <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
              <el-descriptions-item label="备注"><el-tag size="small">学校</el-tag></el-descriptions-item>
              <el-descriptions-item label="联系地址" :contentStyle="{ 'text-align': 'right' }">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column prop="empno" label="工号" width="100"></el-table-column>
        <el-table-column prop="ename" label="姓名"></el-table-column>
        <el-table-column prop="dept.dname" label="部门"></el-table-column>
        <el-table-column prop="job" label="岗位"></el-table-column>
        <el-table-column prop="hiredate" label="入职时间"></el-table-column>

        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="mod(scope.row)">编辑</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 编辑对话框 -->
    <el-dialog title="员工详细信息窗口" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="工号" :label-width="formLabelWidth"><el-input v-model="form.empno" readonly autocomplete="off"></el-input></el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="ename"><el-input v-model="form.ename" autocomplete="off"></el-input></el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-select v-model="form.deptno" placeholder="请选择" style="width: 100%;ss">
            <el-option v-for="(item, index) in lds" :key="'lds' + index" :label="item.dname" :value="item.deptno">
              <span style="float: left">{{ item.dname }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.loc }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位" :label-width="formLabelWidth">
          <!--  下拉数据来自于已经存在的数据的集合  -->
          <!-- <el-select v-model="form.job" placeholder="请选择" style="width: 100%;">
            <el-option v-for="(item, index) in ljobs" :key="'ljobs' + index" :label="item" :value="item">
              <span style="float: left">{{ item }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item }}</span>
            </el-option>
          </el-select> -->
          <!--  下拉数据来自于已经存在的数据的集合或者允许用户输入新数据  -->
          <el-autocomplete clearable class="inline-input" v-model="form.job" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
        </el-form-item>
        <el-form-item label="入职时间" :label-width="formLabelWidth" prop="hiredate">
          <el-date-picker v-model="form.hiredate" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'EmpView',
  methods: {
    handleSelect(item) {
      console.log(item)
    },
    //  为job实现自动填充数据功能
    querySearch(queryString, cb) {
      const ljobs = []
      for (let i = 0; i < this.ljobs.length; i++) {
        const job = {
          value: this.ljobs[i]
        }
        ljobs.push(job)
      }

      const results = queryString ? ljobs.filter(this.createFilter(queryString)) : ljobs
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return job => {
        return job.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    // 计算所有的岗位信息
    filljobs(les) {
      // 清空数据
      this.ljobs = []
      for (let i = 0; i < les.length; i++) {
        const job = les[i].job
        let index = -1
        for (let j = 0; j < this.ljobs.length; j++) {
          if (job === this.ljobs[j]) {
            index = j
            break
          }
        }
        if (index === -1) {
          this.ljobs.push(job)
        }
      }
      console.log(this.ljobs)
    },
    // 开启编辑窗口
    mod(row) {
      this.form = row
      this.dialogFormVisible = true
    },

    // 缓存页面工作所需的数据
    async initPage() {
      let path = '/dept/all'
      const { data: deptres } = await this.$axios.get(path)
      // 需要进行返回结果判断s
      this.lds = deptres.data

      path = '/emp/all'
      const { data: empres } = await this.$axios.get(path)

      const tableData = empres.data
      // 为员工配置部门信息
      for (let i = 0; i < tableData.length; i++) {
        for (let j = 0; j < this.lds.length; j++) {
          if (tableData[i].deptno === this.lds[j].deptno) {
            tableData[i].dept = this.lds[j]
            break
          }
        }
      }
      this.les = tableData
      this.filljobs(this.les)
    },
    handleClick(row) {
      console.log(row)
    }
  },
  data() {
    return {
      // 日历控件处理
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() + 3600 * 1000 * 24 * 7
        },
        shortcuts: [
          {
            text: '一周后',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          },
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },

          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '前天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 48)
              picker.$emit('pick', date)
            }
          },
          {
            text: '三天前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 72)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      // 计算得来的所有的岗位信息
      ljobs: [],
      // 控制对话框是否可见
      dialogFormVisible: false,
      //  对话框Form数据
      form: {},
      // fORM表单验证规则
      rules: {
        ename: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }, { min: 2, max: 10, message: '员工姓名长度在 2 到 10 个字符', trigger: 'blur' }],
        hiredate: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
        date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],
        type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }], // 复选框
        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
      },
      // 控制对话框标签的宽度
      formLabelWidth: '120px',
      // 查询条件关键字
      key: '',
      // 表格数据
      les: [],
      // 缓存部门数据
      lds: []
    }
  },
  created() {
    //  缓存页面工作所需的数据
    this.initPage()
  }
}
</script>
<style type="text/css" lang="less" scoped>
#empapp {
  .el-card {
    margin-top: 12px;
    border-radius: 10px;
  }
}
.my-label {
  background-color: red;
}

.my-content {
  background-color: red;
}
</style>
